<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Web scene - slides | Sample | ArcGIS API for JavaScript 4.18</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #createSlideDiv {
            background-color: white;
            opacity: 0.9;
            color: black;
            padding: 6px;
        }

        #slidesDiv {
            background-color: white;
            opacity: 0.9;
            color: black;
            padding: 10px;
            visibility: hidden;
            bottom: 20px;
            overflow-y: auto;
            text-align: center;
            height: 260px;
        }

        #slidesDiv .slide {
            /* Show cursor as pointer when on a slide */
            cursor: pointer;
            margin-bottom: 6px;
        }

        #slidesDiv .slide .title {
            /* Center the title text */
            text-align: center;
        }

        /* Draw active slide with a nice border around the thumbnail */

        #slidesDiv .slide.active img {
            box-shadow: 0px 0px 12px black;
            border-style: solid;
            border-width: thin;
            border-color: black;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/views/SceneView",
            "esri/WebScene",
            "esri/webscene/Slide"
        ], function (SceneView, WebScene, Slide) {
            var scene = new WebScene({
                portalItem: {
                    // autocasts as new PortalItem()
                    id: "1c7a06421a314ac9b7d0fae22aa367fb"
                }
            });

            var view = new SceneView({
                map: scene,
                container: "viewDiv"
            });

            //添加组件
            view.ui.add(["createSlideDiv", "slidesDiv"], "top-right");

            view.when(function () {
                document.getElementById("slidesDiv").style.visibility = "visible";
                //为先前在 WebScene 中定义的视点、可见层和其他设置添加书签的幻灯片集合
                var slides = scene.presentation.slides;

                slides.forEach((slide,placement)=>{
                    var slideElement = document.createElement("div");
                    slideElement.id = slide.id;
                    slideElement.classList.add("slide");

                    var slidesDiv = document.getElementById("slidesDiv");
                    if (placement === "first") {
                        slidesDiv.insertBefore(slideElement, slidesDiv.firstChild);
                    } else {
                        slidesDiv.appendChild(slideElement);
                    }
                    var title = document.createElement("div");
                    title.innerText = slide.title.text;
                    slideElement.appendChild(title);

                    var img = new Image();
                    //数据 URI 编码的缩略图,获取幻灯片的缩略图
                    img.src = slide.thumbnail.url;
                    img.title = slide.title.text;
                    slideElement.appendChild(img);

                    slideElement.addEventListener("click", function () {
                        //查找所有class为slide的元素
                        var slides = document.querySelectorAll(".slide");
                        //浅拷贝的数组
                        Array.from(slides).forEach(function (node) {
                            node.classList.remove("active");
                        });

                        slideElement.classList.add("active");
                        //将幻灯片的设置应用于SceneView。
                        slide.applyTo(view);
                    });
                });
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
<div id="createSlideDiv" class="esri-widget">
    New slide: <input type="text" id="createSlideTitleInput" size="10"/>
    <button id="createSlideButton">Create</button>
</div>
<div id="slidesDiv" class="esri-widget"></div>
</body>
</html>
